<template>
  <div class="body">
     <el-button @click="$router.go(0)" type="info" icon="el-icon-refresh-right"></el-button>
    <!-- <el-button type="danger" @click="handleDel()" icon="el-icon-delete">删除</el-button> -->
    <el-button type="primary" icon="el-icon-upload2">导出</el-button>
    
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      class="table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="id" label="序号" width="120"></el-table-column>
      <el-table-column align="center" prop="username" label="用户名" width="120"></el-table-column>
      <el-table-column align="center" prop="nickname" label="昵称" width="120"></el-table-column>
      <el-table-column align="center" prop="cardname" label="经办人姓名"></el-table-column>
      <el-table-column align="center" prop="mobile" label="经办人联系方式"></el-table-column>
      <el-table-column align="center" prop="cardcode" label="经办人身份证号"></el-table-column>
      <el-table-column align="center" label="身份证正面">
        <template slot-scope="scope">
          <img :src="$baseUrl+scope.row.cardfront" alt />
        </template>
      </el-table-column>
      <el-table-column align="center" label="身份证反面">
        <template slot-scope="scope">
          <img :src="$baseUrl+scope.row.cardback" alt />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="adopt(scope.row.id)">通过</el-button>
          <el-button size="mini" type="danger" @click="fail(scope.row.id)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,20,30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { daili, shenhedaili } from "@/api/handledby";
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      params: {
        limit: 10,
        offset: 0,
        daili: 1,
        keywords: ""
      },
      total: null,
      query: {},
      tableData: [],
      multipleSelection: []
    };
  },
  created() {
    this.gethandledby();
  },
  methods: {
    // 获取经办人列表
    gethandledby() {
      // this.params.user_id = sessionStorage.getItem("user_id");
      daili(this.params).then(res => {
        if (res.data.code == 1) {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
        }
      });
    },
    // 通过按钮
    adopt(id) {
      this.query.id = id;
      // this.query.user_id = sessionStorage.getItem("user_id");
      this.query.daili = 3;
      shenhedaili(this.query).then(res => {
        if (res.data.code == 1) {
          this.$message.success("提交成功");
          this.gethandledby();
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
      });
    },
	// 不通过
    fail(id) {
      this.query.id = id;
      // this.query.user_id = sessionStorage.getItem("user_id");
      this.query.daili = 2;
      shenhedaili(this.query).then(res => {
        if (res.data.code == 1) {
          this.$message.success("提交成功");
          this.gethandledby();
        } else {
          this.$message.error("网络异常,请稍后再试");
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {};
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 单选框选中时
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表格显示个数
    handleSizeChange(val) {
      this.params.limit = val;
      this.gethandledby();
    },
    // 页码
    handleCurrentChange(val) {
      this.params.offset = parseInt(val - 1) * this.params.limit;
      this.gethandledby();
    }
  }
};
</script>

<style scoped>
.body {
  width: 86vw;
  height: 91vh;
}

.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
